<template>
  <view class="container">
    <view class="search-bar">
      <uni-search-bar placeholder="搜索姓名" @confirm="onSearch"></uni-search-bar>
    </view>
    <view class="list-container">
      <view class="list-item" v-for="item in approvalList" :key="item.id" @click="getTips(item)">
        <view class="item-header">
          <text class="name">{{ item.name }}</text>
          <text class="status" :class="colorType[item.status]" >{{ getStatusText(item.status) }}</text>
        </view>
        <view class="item-content">
          <text class="num">数量: {{ item.num }}</text>
          <text class="time">{{ formatDate(item.create_time) }}</text>
        </view>
      </view>
    </view>
    <!-- 空状态 -->
    <view class="empty-state" v-if="approvalList.length === 0 && !loading">
      <!-- <image src="/static/empty.png" mode="aspectFit"></image> -->
      <text>暂无审批记录</text>
    </view>
    <!-- 加载中 -->
    <view class="loading" v-if="loading">
      <uni-load-more status="loading" contenttext="加载中..."></uni-load-more>
    </view>
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
		colorType:{ 0: 'status-pending',
        1: 'status-approved',
        2: 'status-rejected'},
      approvalList: [],
      loading: false,
      page: 1,
      pageSize: 10,
      searchKey: ''
    }
  },
  onLoad() {
	 
    this.loadData()
  },
  methods: {
	  getTips(item){
		  uni.showModal({
		          title: '司机手机号',
		          content: `${item.send_name}-${item.send_tel}`,
		          confirmText: '确定',
		          confirmColor: '#38c27e',
		          cancelText: '取消',
		  			  showCancel:false,
		          cancelColor: '#666666',
		          success: (res) => {
		            if (res.confirm) {
		              // this.updateStatus(1)
		            }
		          }
		        })
	  },
	  getList(){
	  	request({
	  		url: 'index/approval-list',
	  		method: 'get',
	  		data: {
	  			page: this.page
	  		}
	  	}).then(res => {
	  		uni.hideLoading()
	  		if (res.status == 200) {
	  			this.dataJson = res.data
	  		} else {
	  			uni.showToast({
	  				title: res.message,
	  				icon: 'none',
	  				duration: 2000
	  			});
	  		}
	  	}).catch((err) => {
	  		uni.hideLoading()
	  		uni.showToast({
	  			title: err.message,
	  			icon: 'none',
	  			duration: 2000
	  		});
	  	})
	  },
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        // 模拟API请求
        const res = await request({
	  		url: 'index/approval-list',
	  		method: 'get',
	  		data: {
	  			page: this.page
	  		}
	  	})
		console.log(res)
        if (this.page === 1) {
          this.approvalList = res.data.list
        } else {
          this.approvalList = [...this.approvalList, ...res.data]
        }
        this.page++
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 获取审批列表(模拟)
    getApprovalList() {
      return new Promise((resolve) => {
        // 模拟网络请求延迟
        setTimeout(() => {
          const mockData = [
            { id: 1, name: '张三', num: 15, create_time: '2025-06-10 09:30:00', status: 1 },
            { id: 2, name: '李四', num: 8, create_time: '2025-06-11 14:15:20', status: 2 },
            { id: 3, name: '王五', num: 22, create_time: '2025-06-12 16:40:10', status: 0 },
            { id: 4, name: '赵六', num: 11, create_time: '2025-06-13 10:20:30', status: 1 },
            { id: 5, name: '钱七', num: 9, create_time: '2025-06-14 08:50:40', status: 0 }
          ]
          resolve({ data: mockData })
        }, 800)
      })
    },
    
    // 打开详情页
    openDetail(item) {
      uni.navigateTo({
        url: `/pages/approval/detail?id=${item.id}`
      })
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待审核',
        1: '通过',
        2: '拒绝'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取状态样式
    getStatusClass(status) {
      const classMap = {
        0: 'status-pending',
        1: 'status-approved',
        2: 'status-rejected'
      }
      return classMap[status] || ''
    },
    
    // 格式化日期
    formatDate(dateStr) {
      return dateStr.split(' ')[0]
    },
    
    // 搜索功能
    onSearch(e) {
      this.searchKey = e.detail.value
      this.page = 1
      this.loadData()
    }
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1
    this.loadData()
    uni.stopPullDownRefresh()
  },
  
  // 上拉加载
  onReachBottom() {
    if (!this.loading) {
      this.loadData()
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.search-bar {
  margin-bottom: 20rpx;
}

.list-container {
  .list-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .name {
        font-size: 34rpx;
        font-weight: 600;
        color: #333;
      }
      
      .status {
        font-size: 28rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
      }
      
      .status-approved {
        background-color: rgba(56, 194, 126, 0.1);
        color: #38c27e;
      }
      
      .status-rejected {
        background-color: rgba(255, 87, 87, 0.1);
        color: #ff5757;
      }
      
      .status-pending {
        background-color: rgba(255, 153, 0, 0.1);
        color: #ff9900;
      }
    }
    
    .item-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .num, .time {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
    opacity: 0.6;
  }
  
  text {
    font-size: 30rpx;
    color: #999;
  }
}

.loading {
  padding: 30rpx 0;
  text-align: center;
}
</style>    